<template>
	<view class="content">
		<view class="header">
			<view class="status-box">
				<view 
					v-for="item in statusList" 
					class="status-item" 
					:class="item.value == form.type ? 'active' : ''"
					@click="switchClickTab(item)">
					{{ item.text }}
				</view>
			</view>
			<uni-row class="demo-uni-row">
				<uni-col :span="15">
					<!-- <uni-datetime-picker type="daterange" v-model="form.range" @change="bindDateChange" /> -->
				</uni-col>
				<uni-col :span="9" offset="1">
					<uni-data-select
						v-model="form.statisticValue" 
						placeholder="请选择" 
						:localdata="statisticsOptions" 
						@change="bindDateChange"></uni-data-select>
				</uni-col>
			</uni-row>
		</view>
		<view class="echarts-box">
			<view class="search-all" @click="handleClick">全部</view>
			<view class="top-chart">
				<echarts ref="echartsTop" :option="optionTop" canvasId="echartsTop"></echarts>
			</view>
			<view class="bottom-chart">
				<echarts ref="echartsBottom" :option="option" canvasId="echartsBottom"></echarts>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					type: 'a',
					range: ['2021-02-1', '2021-3-28'],
					statisticValue: ''
				},
				statusList: [{
						text: '按区域统计',
						value: 'a'
					},
					{
						text: '按用户统计',
						value: 'success'
					},
					{
						text: '按测站统计',
						value: 'failed'
					}
				],
				statisticsOptions: [{
						text: '按区域统计',
						value: 'a'
					},
					{
						text: '按用户统计',
						value: 'success'
					},
					{
						text: '按测站统计',
						value: 'failed'
					}
				],
				range: ['2021-02-1', '2021-3-28'],
				statisticValue: '',
				optionTop: {},
				option: {},
			}
		},
		onReady() {
			this.optionTop = {
				color: ['#2391ff'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					confine: true
				},
				legend: {
					orient: 'vertical',
					itemHeight: 8,
					itemWidth: 8,
					icon: "circle",
					right: 20,
					top: 25,
					data: ['水位']
				},
				grid: {
					left: 20,
					right: 20,
					bottom: 15,
					top: 60,
					containLabel: true
				},
				dataZoom: [{
					type: 'inside'
				}],
				xAxis: [{
					type: 'category',
					data: ['20:16', '20:17', '20:18', '20:19', '20:22', '20:25', '20:28', '21:16', '21:17',
						'21:18'
					],
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#666'
					}
				}],
				yAxis: [{
					name: `单位： M  `,
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						color: '#666'
					},
					splitLine: {
						show: false
					},
					splitArea: {
						show: false
					}
				}],
				series: [{
					name: '水位',
					type: 'bar',
					barWidth: 10,
					data: [300, 170, 140, 144, 100, 120, 310, 200, 170, 140],
					itemStyle: {}
				}]
			};
			this.option = {
				color: ['#00d6f8'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					confine: true
				},
				legend: {
					orient: 'vertical',
					itemHeight: 8,
					itemWidth: 8,
					icon: "circle",
					right: 10,
					top: 0,
					data: ['用水量']
				},
				grid: {
					left: 20,
					right: 20,
					bottom: 15,
					top: 40,
					containLabel: true
				},
				dataZoom: [{
					type: 'inside'
				}],
				xAxis: [{
					type: 'category',
					data: ['20:16', '20:17', '20:18', '20:19', '20:22', '20:25', '20:28', '21:16', '21:17',
						'21:18', '21:19', '21:22', '21:25', '21:28', '23:16', '23:17', '23:18', '23:19',
						'23:22', '23:25', '23:28', '24:16', '24:17', '24:18', '24:19', '24:22', '24:25',
						'24:28', '25:16', '25:17', '25:18', '25:19', '25:22', '25:25', '25:28', '26:16',
						'26:17', '26:18', '26:19', '26:22', '26:25', '26:28', '27:16', '27:17', '27:18',
						'27:19', '27:22', '27:27', '27:28', '28:16', '28:17', '28:18', '28:19', '28:22',
						'28:25', '28:28'
					],
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#666'
					}
				}],
				yAxis: [{
					name: `单位： 万m³
					`,
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						color: '#666'
					},
					splitLine: {
						show: false
					},
					splitArea: {
						show: false
					}
				}],
				series: [{
					name: '用水量',
					type: 'bar',
					barWidth: 2,
					data: [300, 170, 140, 144, 100, 120, 310, 200, 170, 140, 44, 30, 32, 30, 370, 570, 340, 34,
						30, 620, 310, 200, 170, 300, 170, 140, 144, 100, 120, 310, 200, 170, 140, 44, 30,
						32, 30, 370, 570, 340, 34, 30, 620, 310, 200, 170, 300, 170, 140, 144, 100, 120,
						310, 200, 170, 140
					],
					itemStyle: {}
				}]
			};
		},

		methods: {
			bindDateChange(e) {
				console.log('bindDateChange事件:', e);
			},
			
			handleClick(e) {
				uni.navigateTo({
				    url: `../waterLevelData/waterLevelData`
				});
			},
			
			switchClickTab(item) {
				this.form.type = item.value;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;

		.header {
			height: 110upx;
			padding: 0 10upx;
			.status-box {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				border: 1rpx solid #e3e3e3;
				border-radius: 8upx;
				height: 40upx;
				overflow: hidden;

				.status-item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					height: 100%;
					padding: 0rpx 17upx;
					background: #fff;
					border-right: 1upx solid #e3e3e3;
					font-size: 24upx;
					color: #999;

					&:last-child {
						border-right: none;
					}

					&.active {
						color: #fff;
						background: #409eff;
					}
				}
			}

		}

		.echarts-box {
			height: calc(100vh - 115upx);
			position: relative;
			.search-all {
				position: absolute;
				left: 40upx;
				top: 10upx;
				color: #409eff;
				font-size: 24upx;
				z-index: 9999;
			}

			.top-chart {
				height: 45%;
			}

			.bottom-chart {
				margin-top: 40upx;
				height: 45%;
			}
		}
	}
	::v-deep  .uni-calendar--fixed {
		z-index: 999999;
	}
	::v-deep .uni-row {
		width: 100%;
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 15upx;
		
		.uni-easyinput__content-input {
			height: 46upx;
		}
		
		.uni-date {
			height: 46upx;
		}
		
		.uni-date__x-input {
		    height: 46upx;
		    line-height: 46upx;
		    font-size: 12px;
		}
		
		.uni-select__input-box {
			height: 50upx !important;
		}
		.uni-select {
			height: 50upx;
			line-height: 50upx;
		}
		.uni-date-x .range-separator  {
			height: 46upx;
			line-height: 46upx;
		}
	}
</style>
